<html>
<head>
<script type="text/javascript">
var Width = 300, Height = 300 ;
var element_num ;
var surface ;
var img ;
var electrons ;
var interval ;
var sin_table ;
var cos_table ;

function object( o ) {
  var f = object.f, i, len, n, prop ;
  f.prototype = o ;
  n = new f ;
  for( i = 1, len = arguments.length; i < len; i++ )
    for( prop in arguments[ i ] )
      n[ prop ] = arguments[ i ][ prop ] ;
    return n ;
}
object.f = function( ){ } ;

var Electron = {

  x: Width / 2,
  y: Height / 2,

  checkConstraint: function( ) {

    if( this.x > Width )
      this.x -= Width ;
    if( this.x < 0 )
      this.x += Width ;
    if( this.y > Height )
      this.y -= Height ;
    if( this.y < 0 )
      this.y += Height ;

  },

  getRandom: function( ) {
    return parseInt( Math.random( ) * 360 ) ;
  },

  move: function( ) {

    var r = this.getRandom( ) ;
    this.x += cos_table[ r ] ;
    this.y += sin_table[ r ] ;

    this.checkConstraint( ) ;

  },

  beRandom: function( ) {
    this.x = parseInt( Math.random( ) * Width ) ;
    this.y = parseInt( Math.random( ) * Height ) ;
  },

  display: function( ) {
    surface.drawImage( img, this.x - 1 , this.y - 1) ;
  }

} ;

function init( ) {

  surface = document.getElementById( "canvas" ).getContext( "2d" ) ;
  initTable( ) ;
  initImage( ) ;
  initElectrons( ) ;

}

function initTable( ) {

  sin_table = new Array( ) ;
  cos_table = new Array( ) ;

  for( var i = 0; i < 360; i++ ) {
    sin_table.push( Math.sin( i / 180 * Math.PI ) ) ;
    cos_table.push( Math.cos( i / 180 * Math.PI ) ) ;
  }

}

function initImage( ) {

  stop( ) ;

  if( ! img )
    img = new Image( ) ;
  img.src = document.getElementById( "color" ).value ;

  start( ) ;

}

function update( ) {

  surface.clearRect( 0, 0, Width, Height ) ;

  for( var i = 0; i < element_num; i++ ) {
    var e = electrons[ i ] ;
    e.move( ) ;
    e.display( )
  }

}

function initElectrons( ) {

  stop( ) ;

  element_num = document.getElementById( "element_num" ).value ;
  electrons = new Array( ) ;
  for( var i = 0; i < element_num; i++ ) {
    var e = object( Electron ) ;
    electrons.push( e ) ;
  }

  start( ) ;

}

function stop( ) {
  if( interval )
    clearInterval( interval ) ;
}

function start( ) {
  interval = setInterval( update, 1000 / 60 ) ;
}

function beRandom( ) {

  stop( ) ;

  for( var i = 0; i < element_num; i++ )
    electrons[ i ].beRandom( ) ;

  start( ) ;

}

</script>
</head>
<body onLoad="init( )">

<p>
<label>Electrons#</label>
<select id="element_num" name="element_num" onChange="initElectrons( )">
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="50">50</option>
<option value="100" selected>100</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</p>

<p>
<label>Color</label>
<select id="color" name="color" onChange="initImage( )">
<option value="black.png" selected>black</option>
<option value="red.png">red</option>
<option value="blue.png">blue</option>
</select>
</p>

<p>
<button type=button onClick="beRandom( )">beRandom</button>
</p>

<canvas id="canvas" width="300" height="300" style="border:medium solid #000000" />

</body>
</html> 
